<template>
  <el-container>
    <el-aside>
        <el-tree-v2
            :data="data"
            :props="defaultProps"
            :highlight-current="true"
            :item-size="40"
            @node-click="handleNodeClick" />
    </el-aside>
    <el-main v-show="!!doc.name">
      <div>
        <h2>{{doc.name}}</h2>
        <span>阅读数：{{doc.viewCount}}</span>
        <el-divider direction="vertical" border-style="dashed" />
        <span>点赞数：{{doc.voteCount}}</span>
      </div>
      <el-divider/>
      <el-button type="primary" :icon="Pointer" round @click="vote">点赞！！！</el-button>
      <div class="editor-content-view">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editorRef"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
      <Editor
          style="height: 1000px; overflow-y: hidden;"
          v-model="valueHtml"
          :defaultConfig="editorConfig"
          mode="default"
          @onCreated="handleCreated"
      />
    </div>
    </el-main>
  </el-container>
</template>
<script lang="ts" setup>
import {
  Pointer,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor,Toolbar} from '@wangeditor/editor-for-vue'
import {useRoute} from "vue-router";
import {h, onBeforeUnmount, onMounted, ref, shallowRef} from "vue";
import axios from "axios";
import {Tool} from "@/util/tool";
import {ElNotification} from "element-plus";
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref()
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  console.log(editor.getAllMenuKeys())
  if (editor == null) return
  editor.destroy()
})
const toolbarConfig = {
  toolbarKeys:["fullScreen"]
}
const editorConfig = {
  readOnly : true,
}

const doc:any=ref({})

const vote=(()=>{
  axios({
    method: 'post',
    url: '/doc/updateVote',
    // 传递参数
    params: {
      "id":doc.value.id
    },
  }).then((response) => {
    if (response.data.data===0){
      open1("red",response.data.message)
    }else {
      doc.value.voteCount=doc.value.voteCount+1
    }
  })
})

const handleCreated = (editor:any) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

const handleNodeClick = (data: Doc) => {
  handleQueryContent(data.id)
  doc.value.id=data.id
  doc.value.name=data.name
  doc.value.viewCount=data.viewCount
  doc.value.voteCount=data.voteCount
}
interface Doc {
  id: string
  name: string
  viewCount:number
  voteCount:number
  children?: Doc[]
}
const route=useRoute();
const data=ref();
const defaultProps = {
  children: 'children',
  label: 'name',
  value:'id'
}
const handleQuery=()=>{
  axios({
    method: 'get',
    url: '/doc/listByEbookId',
    // 传递参数
    params: {
      "ebookId":route.query.ebookId
    },
  }).then((response) => {
    data.value=Tool.array2Tree(response.data.data,0)
  })
}
const handleQueryContent=(id:any)=>{
  axios({
    method: 'get',
    url: '/doc/oneContent/'+id,
  }).then((response) => {
    valueHtml.value=response.data.data
  })
}
onMounted(()=>{
  handleQuery()
})
const open1 = (color:string,msg:string) => {
  ElNotification({
    title: '消息',
    message: h('i', { style: 'color: '+color }, msg),
    duration:3000,
  })
}
</script>
<style scoped>
.editor-content-view {
  border: 3px solid #ccc;
  border-radius: 5px;
  padding: 0 10px;
  margin-top: 20px;
  overflow-x: auto;
}

.editor-content-view p,
.editor-content-view li {
  white-space: pre-wrap; /* 保留空格 */
}

.editor-content-view blockquote {
  border-left: 8px solid #d0e5f2;
  padding: 10px 10px;
  margin: 10px 0;
  background-color: #f1f1f1;
}

.editor-content-view code {
  font-family: monospace;
  background-color: #eee;
  padding: 3px;
  border-radius: 3px;
}
.editor-content-view pre>code {
  display: block;
  padding: 10px;
}

.editor-content-view table {
  border-collapse: collapse;
}
.editor-content-view td,
.editor-content-view th {
  border: 1px solid #ccc;
  min-width: 50px;
  height: 20px;
}
.editor-content-view th {
  background-color: #f1f1f1;
}

.editor-content-view ul,
.editor-content-view ol {
  padding-left: 20px;
}

.editor-content-view input[type="checkbox"] {
  margin-right: 5px;
}

</style>
